<template>
    <div id="member">
        <el-col :span="24" class="action-bar">
            <el-input v-model="searchText" placeholder="请输入关键字" style="width:300px"></el-input>
            <el-select v-model="circleType" clearable placeholder="圈子类型" style="margin:0 20px;">
                <el-option
                v-for="item in circleTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>

            <el-select v-model="circleStatus" clearable placeholder="圈子状态" style="margin:0 20px;">
                <el-option
                v-for="item in circleStatusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
                <el-option
                        label="推荐圈"
                        value="recommend">
                </el-option>
            </el-select>
                <el-button type="primary" size="medium" @click="search">检索</el-button>
                <el-button type="primary" size="medium" @click="postVisible=true">添加</el-button>
            </el-col>

            <el-col class="action-bar screen">
                    <el-checkbox label="管理员" name="management" v-model="showColumns.management"></el-checkbox>
                    <el-checkbox label="排序" name="sort" v-model="showColumns.sort"></el-checkbox>
                    <el-checkbox label="创建时间" name="createdAt" v-model="showColumns.createdAt"></el-checkbox>
            </el-col>

        <!-- 列表 -->
        <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
                prop="date"
                label="背景图"
                width="100">
                <template slot-scope="scope">
                    <div v-if="scope.row.circle_info">
                        <img :src="scope.row.circle_info.background_img_url" alt="" style="width:60px;height:60px;object-fit:cover">
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                prop="date"
                label="头像"
                width="100">
                <template slot-scope="scope">
                    <div v-if="scope.row.circle_info">
                        <img :src="scope.row.circle_info.thumb_img_url" alt="" style="width:60px;border-radius:50%;height:60px;object-fit:cover">
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                prop="circle_info.name"
                label="圈子名称"
                width="200"
                >
            </el-table-column>
            <el-table-column
                width="100"
                prop="circle_info.total_views"
                label="总浏览量">
            </el-table-column>
            <el-table-column
                width="100"
                prop="circle_info.user_num"
                label="用户数"
                >
            </el-table-column>
            <el-table-column
                prop="score"
                width="100"
                label="圈子类型">
            </el-table-column>
            <el-table-column
                    prop="status_name"
                    label="是否推荐"
                    width="100"
            >
                <template slot-scope="scope">
                    <div>
                        <el-tag type="info" v-if="scope.row.is_recommend == '0'">否</el-tag>
                        <el-tag v-else>是</el-tag>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                prop="score"
                width="100"
                label="圈子状态">
            </el-table-column>
            <el-table-column
                v-if="showColumns.management"
                prop="address"
                label="管理员"
                width="150"
                >
                <template slot-scope="scope">
                    <div>
                        <div>{{scope.row.status_name}}</div>
                        <div>{{scope.row.status_name}}</div>
                        <div>{{scope.row.status_name}}</div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                prop="address"
                label="所属类型"
                width="100"
                >
            </el-table-column>
            <el-table-column
                v-if="showColumns.sort"
                prop="status_name"
                label="排序"
                width="100"
                >
            </el-table-column>
            <el-table-column
                v-if="showColumns.createdAt"
                prop="address"
                label="创建时间"
                width="200"
                >
            </el-table-column>
            <el-table-column label="操作" width='143'>
                <template slot-scope="scope">
                    <el-select v-model='scope.row.operation' style='width: 120px' placeholder="请选择操作">
                    <el-option value='编辑'><el-button type='text' @click="editPost(scope.row.id)">编辑</el-button></el-option>
                    <el-option value='删除'><el-button type='text' @click="deletePost(scope.row.id)">删除</el-button></el-option>
                    <el-option value='禁言'><el-button type='text' @click="forbiddenWords(scope.row.id,true)">禁言</el-button></el-option>
                    <el-option v-if="scope.row.is_recommend == '0'" value='设置推荐'><el-button type='text' @click="setRecommend(scope.row.id)">设置推荐</el-button></el-option>
                    <el-option v-if="scope.row.is_recommend == '1'" value='取消推荐'><el-button type='text' @click="setRecommend(scope.row.id)">取消推荐</el-button></el-option>
                    <el-option value='取消禁言'><el-button type='text' @click="forbiddenWords(scope.row.id,false)">取消禁言</el-button></el-option>
                    <el-option value='帖子类型管理'><el-button type='text' @click="toPoStType(scope.row.id)">帖子类型管理</el-button></el-option>
                    <el-option value='经验值与等级'><el-button type='text' @click="toGrad(scope.row.id)">经验值与等级</el-button></el-option>
                    <el-option value='设置管理员'><el-button type='text' @click="setAdmin(scope.row.id)">设置管理员</el-button></el-option>

                    </el-select>
                </template>
            </el-table-column>

        </el-table>
        <el-col :span="24" class="footer-bar">
			<div class="page-code">
				<el-pagination
					background
					:page-size="16"
					layout="prev, pager, next"
					:total="totalPage"
					@current-change="pageChange"
						>
				</el-pagination>
			</div>
    </el-col>

        <!-- 编辑，新建圈子 -->
		<el-dialog title="圈子" :visible.sync="postVisible" @close="initData">
            <el-form :label-position="'left'" label-width="100px"  >
                <el-form-item label="背景图" >
                    <el-upload
                        class="avatar-uploader"
                        action="https://hks-sys.dindong.cn/api/file/upload-img"
                        name="photo"
                        :show-file-list="false"
                        :on-success="handleBackground"
                        :before-upload="beforeAvatarUpload">
                        <img v-if="form.backgroundImg" :src="form.backgroundImg" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                </el-form-item>
                <el-form-item label="头像" >
                    <el-upload
                        class="avatar-uploader"
                        action="https://hks-sys.dindong.cn/api/file/upload-img"
                        name="photo"
                        :show-file-list="false"
                        :on-success="handleLogo"
                        :before-upload="beforeAvatarUpload">
                        <img v-if="form.logoImg" :src="form.logoImg" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                </el-form-item>
                <el-form-item label="圈子名称" >
                    <el-input palceholder="圈子名称" v-model="form.circleName"></el-input>
                </el-form-item>
                <el-form-item label="圈子类型" >
                    <el-select v-model="form.circleType" clearable placeholder="圈子类型" style="margin:0 20px;">
                        <el-option
                        v-for="item in circleTypeOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <!-- <el-form-item label="圈子状态" >
                    <el-select v-model="form.circleStatus" clearable placeholder="圈子状态" style="margin:0 20px;">
                        <el-option
                        v-for="item in circleStatusOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item> -->
                <el-form-item label="描述" >
                    <el-input palceholder="描述" v-model="form.intro"></el-input>
                </el-form-item>
                <el-form-item label="排序" >
                    <el-input palceholder="排序" v-model="form.sortNum"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submit" >提交</el-button>
			</div>
		</el-dialog>
        <!-- 编辑 新建圈子end -->


    </div>
</template>
<script>
export default {
    name:'member',
    data() {
        return {
            postVisible:false,//编辑圈子弹窗状态


            searchText:'',
            circleTypeId:'',//选中的用户id
            operation:'',//选中的表格操作

            circleType:'',//头部筛选的圈子类型
            circleTypeOptions:[
                {label:'圈1',value:0},
                {label:'圈2',value:1},
            ],

            circleStatus:'',//头部筛选的圈子状态
            circleStatusOptions:[
                {label:'全部',value:0},
                {label:'正常',value:1},
                {label:'禁言',value:2}
            ],
            adminOptions:[
                {label:'管理员1',value:1},
                {label:'管理员2',value:2}
            ],
            showColumns:{
                management:false,//管理者
                sort:false,//排序
                createdAt:false,//注册时间
            },
            tableData: [{}],
            page:1,
            totalPage:0,

            form:{
                circleName:'',
                backgroundImg:'',//背景
                backgroundId:'',
                logoImg:'',//头像
                logoId:'',
                circleType:'',
                intro:'',
                circleStatus:'',//圈子状态
                sortNum:''
            },
            formId:'',//选中的圈子id

            executor:'',//选中的管理员
			executorList:[],//选中的管理员数组
			vipList: [],//搜索的管理员
        }
    },
    computed: {
		executorIdList:function(){
			const list = this.executorList;
			const newList=	list.map(item=>{
				return item.user_id
			})
			return newList
		}
	},
    methods: {

         beforeAvatarUpload(file) {
			//上传照片前的操作
			// console.log(file,555)
		},
		handleBackground(res, file) {
			//上传背景成功
			if(res.data){
				this.form.backgroundImg=res.data.img_url;
				this.form.backgroundId=res.data.id;
			}
        },
        handleLogo(res, file) {
			//上传背景成功
			if(res.data){
				this.form.logoImg=res.data.img_url;
				this.form.logoId=res.data.id;
			}
        },
        async submit(){
            //编辑，新增圈子
            let params={
                name:this.form.circleName,
                desc:this.form.intro,
                thumb_img_id:this.form.logoId,
                background_img_id:this.form.backgroundId,
                classify_id:this.form.circleType,
                id:this.formId,
                sort:this.form.sortNum
            }
            console.log(params)
            let res=await this.$api.adminAddCircle(params)
            if(res.data.level=='success'){
                this.$message({
                    type:'success',
                    message:res.data.message
                })
            }else{
                this.$message({
                    type:'error',
                    message:res.data.message
                })

            }
        },
        async getCircleClassifyList(){
            //获取圈子类型
            let res=await this.$api.getCircleClassifyList();
            if(res.data.level=='success'){
                this.circleTypeOptions=res.data.data.map(item=>{
                    return{
                        value:item.id,
                        label:item.name
                    }
                })
            }
        },
        search(){
            this.page=1;
            console.log(this.circleType,"type")
            console.log(this.circleStatus,"status")
            this.getCircleList()
        },
        async getCircleList(){
            //获取圈子列表
            let params={
                page:this.page,
                keyword:this.searchText,
                limit:16,
                classify_id:this.circleType,
                status:this.circleStatus
            }
            let res=await this.$api.getCircleList(
                params);
            if(res.data.level=='success'){
                this.tableData=res.data.data;
                this.totalPage=res.data.page_info.total;
            }
        },
        pageChange(e){
			//翻页
			this.page=e;
			this.getCircleList();
        },
        initData(){
            this.form = this.$options.data().form;
        },
        async editPost(id){
             this.postVisible = true
            //编辑圈子
            let params={
                id:id
            }
            let res=await this.$api.getCircleDetail(
                params);
            if(res.data.level=='success'){
                let data = res.data.data
                this.form.circleName = data.name
                this.form.backgroundImg = data.background_img_url
                this.form.backgroundId = data.background_img_id
                this.form.logoImg = data.thumb_img_url
                this.form.logoId = data.thumb_img_id
                this.form.intro = data.desc
                this.form.circleStatus = data.is_activation
                this.formId = data.id
            }
        },
        async deletePost(id){
            //删除圈子
            let judge=null

            try {
              judge=  await this.$confirm('删除该圈子?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
                })
            } catch (error) {
                judge='cancel'
            }
            if(judge!='confirm'){
                return
            }
            let res=await this.$api.delCircle({
                id:id
            })
            if(res.data.level=='success'){
                this.$message({
                    type:'success',
                    message:res.data.message
                })
                this.getCircleList();
            }else{
                this.$message({
                    type:'error',
                    message:res.data.message
                })
            }
        },
        async setRecommend(id){
            //设置圈子推荐
            //编辑圈子
            let params={
                id:id
            }
            let res=await this.$api.setCircleRecommend(
                params);
            if(res.data.level=='success'){
                this.$message({
                    type:'success',
                    message:res.data.message
                })
                this.getCircleList()
            }
        },
        async forbiddenWords(id,flag){
            //禁言圈子
            let judge=null;
            let tit=flag?'禁言该圈子?':'取消该圈子的禁言'
            try {
              judge=  await this.$confirm(tit, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
                })
            } catch (error) {
                judge='cancel'
            }
            console.log(judge)
        },
        toPoStType(id){
            //设置该圈子的帖子类型
            this.$router.push({name:'PostType',query:{id}})
        },
        toGrad(id){
            //设置经验值
            this.$router.push({name:'Experience',query:{id}})
        },
        setAdmin(id){
            //设置管理员
            this.$router.push({name:'CircleAdmin',query:{id}})
        },


    },
    mounted() {
        this.getCircleList()
        this.getCircleClassifyList()
    },
}
</script>
<style lang="scss" scoped>
.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
		border: 1px dashed #d9d9d9;
	}
	.avatar {
		width: 178px;
		height: 178px;
		display: block;
		object-fit: contain;
    }
    .dialog-footer{
        text-align: center
    }
.screen{
          margin-top: -10px !important;
      }
    .action-bar{
			background-color: #f2f2f2;
			height: 60px;
			margin: 10px 0px;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			padding-left: 20px;
			.action-bar-input{
				width: 250px;
				margin-right: 14px;
      }
      .task-form-text{
				color: #666666;
			}
		}
		.el-table-style{
			width: 100%;
			border: 1px solid #f2f2f2;
		}
		.footer-bar{
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #f2f2f2;
			padding: 8px;
			margin: 10px 0px;
			box-sizing: border-box;
		}
		.dialog-footer{
			text-align: center;
		}
		.executorList{
			display: flex;
			flex-wrap: wrap;
			div{
				margin:10px;
				border:1px solid #eee;
				border-radius: 5px;
				padding:5px 10px;
			}
		}
</style>
